 /*
 * @description: 用户任务反馈列表
 * @Author: along
 * @Date: 2021-08-02
 * @Last Modified by:
 * @Last Modified time: 2021-08-02
 */
<template>
    <div class="container platformControl">
        <div class="__nav">
            <p class="__nav_title">
                用户任务反馈
            </p>
        </div>
        <!-- header -->
        <div class="header-nav">
            <div class="header_left">
                <div class="__info">
                    <p class="__info_title">项目类型</p>
                    <el-select
                        v-model="formData.shop_project_no"
                        clearable
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in projectList"
                            :key="item.shop_project_no"
                            :label="item.project_title"
                            :value="item.shop_project_no"
                        />
                    </el-select>
                </div>
                <div class="__info">
                    <p class="__info_title">商家信息</p>
                    <el-input
                        v-model="formData.keyword"
                        placeholder="请输入公司名称或ID"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">审核状态</p>
                    <el-select
                        v-model="formData.task_status"
                        filterable
                        placeholder="请选择"
                        size="small"
                        @change="getTableData(1)"
                    >
                        <el-option
                            v-for="item in statusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </div>
                <div class="__info">
                    <p class="__info_title">用户信息</p>
                    <el-input
                        v-model="formData.user_info"
                        placeholder="请输入用户昵称/id"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">审核人</p>
                    <el-input
                        v-model="formData.auti_people"
                        placeholder="请输入审核人姓名"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">任务名称</p>
                    <el-input
                        v-model="formData.task_title"
                        placeholder="请输入任务名称或ID"
                        size="small"
                        clearable
                        suffix-icon="el-icon-search"
                        @change="getTableData(1)"
                        @keyup.native.enter="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <p class="__info_title">提交时间</p>
                    <el-date-picker
                        v-model="date"
                        type="datetimerange"
                        :picker-options="pickerOptions()"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        align="right"
                        size="small"
                        @change="getTableData(1)"
                    />
                </div>
                <div class="__info">
                    <el-button
                        size="small"
                        type="primary"
                        @click="() => {
                            this.$router.push({
                                name: 'shopProjectStudentAwardRank'
                            })
                        }"
                    >
                        查看用户奖励排行
                    </el-button>
                </div>
            </div>
        </div>
        <!-- /header -->

        <!-- table -->
        <div class="__wrap">
            <el-table
                :data="tableData"
                height="100%"
                style="width: 100%;"
                border
                ref="platformControl"
            >
                <el-table-column
                    type="index"
                    width="80"
                    label="序号"
                    align="center"
                />
                <el-table-column
                    prop="true_name"
                    label="用户信息"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="180"
                >
                    <template slot-scope="scope">
                        <div class="__flex_wrap">
                            <p class="__flex_wrap_title">{{ scope.row.true_name }}</p>
                            <p>手机号:{{ scope.row.phone }}</p>
                            <p>用户ID:{{ scope.row.student_no }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="school_name"
                    label="学校名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="project_title"
                    label="项目名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="task_title"
                    label="任务名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="company_name"
                    label="商家名称"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="task_price"
                    label="单任务酬劳(元)"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="120"
                />
                <el-table-column
                    prop="start_time"
                    label="任务时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="180"
                >
                    <template slot-scope="scope">
                        <div class="__flex_wrap">
                            <p>起:{{ scope.row.start_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                            <p>至:{{ scope.row.end_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}</p>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="submit_time"
                    label="提交时间"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="150"
                >
                    <template slot-scope="scope">
                        {{ scope.row.submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="审核状态"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                    :width="130"
                >
                    <template slot-scope="scope">
                        <div class="__flex_clum">
                            <span
                                class="__flex_wrap_targe"
                                :style="{background: scope.row.status == 2 ? 'rgba(194, 194, 194, 1)' : scope.row.status === 0 ? 'rgba(255, 167, 45, 1)' : scope.row.status === 1 ? 'rgba(76, 217, 100, 1)' : scope.row.status === -1 || scope.row.status === -2 ? 'rgba(255, 48, 48, 1)' : ''}"
                            />
                            {{ scope.row.status | filterStatus }}
                            <span
                                v-if="scope.row.status == -1"
                                class="___flex_reson"
                                @click="showRemarkDialog2(scope.row)"
                            >(原因)</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="verify_admin_true_name"
                    label="审核人员"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    prop="remark"
                    label="备注"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                    align="left"
                />
                <el-table-column
                    label="操作"
                    align="left"
                    fixed="right"
                    :width="100"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="handleCheckDetail(scope.row)"
                        >
                            {{ scope.row.status === 0 ? '审核' : '查看' }}
                        </el-button>
                        <el-button
                            type="text"
                            class="curse-add"
                            @click="showRemarkDialog(scope.row)"
                        >
                            备注
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- /table -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    layout="total, prev, pager, next, jumper"
                    background
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>

        <!-- 备注弹窗 -->
        <reject-dialog
            ref="remarkDialog"
            title="填写备注"
            placeholder="请输入备注信息"
            :visible.sync="remarkDialog"
            :maxlength="100"
            @confirm="handleChangeRemark(shop_no, $event)"
        />

        <!-- 查看审核原因 -->
        <reject-dialog
            ref="remarkDialog2"
            title="未通过原因"
            placeholder="请输入备注信息"
            :visible.sync="remarkDialog2"
            :reason-detail="resonDetail"
            :maxlength="100"
        />
    </div>
</template>

<script>
import RejectDialog from "@/components/dialog/reject-dialog";
import { back } from '@/mixin/back';
export default {
    mixins: [back],
    components: {
        RejectDialog
    },
    data () {
        return {
            ID: '',
            remarkDialog2: false,
            resonDetail: '',
            remarkDialog: false,//备注弹窗
            formData: {
                shop_project_no: '',
                task_type: '',
                keyword: '',
                task_status: 99,
                user_info: '',
                auti_people: '',
                task_title: ''
            },
            date: [],
            statusList: [{value: 99, label: '全部'},{value: 2, label: '待提交'},{value: 0, label: '待审核'},{value: 1, label: '已通过'},{value: -1, label: '未通过'},{value: -2, label: '已放弃'}],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableData: [
            ],
            authResult: {},
            projectList: []
        };
    },
    filters: {
        filterStatus (val) {
            if(val === 0) return '待审核';
            if(val === 1) return '已通过';
            if(val === 2) return '待提交';
            if(val === -1) return '未通过';
            if(val === -2) return '已放弃';
            if(val === -3) return '任务终止';
        }
    },
    computed: {},
    watch: {},
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '工作'},{title: '精英任务'},{title: '用户任务反馈'}]);
        this.authResult = this.$route.meta.authResult;
        this.getTableData();
        this.getProjectList();
    },
    methods: {
        /**
         * @description 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/task_stuagent_for_shop%5Cget_receive_list', {
                page_id: page || this.page.now_page,
                shop_project_no: this.formData.shop_project_no,
                task_keyword: this.formData.task_title,
                company_keyword: this.formData.keyword,
                student_keyword: this.formData.user_info,
                admin_true_name: this.formData.auti_people,
                status: this.formData.task_status,
                start_time: this.date === null ? '' : (!this.date.length ? '' : parseInt(new Date(this.date[0]).getTime() / 1000)),
                end_time: this.date === null ? '' : (!this.date.length ? '' : parseInt(new Date(this.date[1]).getTime() / 1000))
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * @description 获取项目
         */
        getProjectList () {
            this.$post('/student/task_stuagent_shop_project%5Cget_list_for_select',{},resp=>{
                if (resp.code == 1) {
                    this.projectList = resp.data;
                } else if (resp.code == 0) {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * @description 查看详情
         */
        handleCheckDetail (row) {
            this.$router.push({
                name: 'shopProjectStudentFeedbackDetail',
                query: {
                    no: row.apply_no,
                    task_no: row.task_no,
                    status: row.status
                }
            });
        },

        /**
         * 显示备注弹窗
         * @param row
         */
        showRemarkDialog(row) {
            this.ID = row.apply_no;
            this.remarkDialog = true;
        },

        /**
         * 显示失败原因弹窗
         * @param row
         */
        showRemarkDialog2(row) {
            this.resonDetail = row.verify_fail_reason;
            this.remarkDialog2 = true;
        },

        /**
         * @description 备注
         */
        handleChangeRemark(id, remark) {
            this.$post('/student/task_stuagent_for_shop%5Creceive_set_remark', {
                apply_no: this.ID,
                remark
            }, resp => {
                if (resp.code === 1) {
                    this.getTableData();
                    this.$notify({
                        type: 'success',
                        message: '操作成功',
                        title: '提示'
                    });
                } else {
                    this.$notify({
                        type: 'warning',
                        message: resp.msg,
                        title: '提示'
                    });
                }
            });
        },

        /**
         * @description 时间处理
         */
        pickerOptions () {
            return {
                shortcuts : [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();

                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            };
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
.platformControl {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    // width: 100%;
    // height: 100%;
    overflow: hidden;
    margin: 12px;
    .__nav {
        width: 100%;
        height: 67px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: 35px;
        border-bottom: 1px rgba(240, 242, 245, 1) solid;
        margin-bottom: 24px;
        .__nav_title {
            color: rgba(51, 51, 51, 1);
            font-size: 20px;
            font-weight: 500;
            position: relative;
            &::before {
                content: '';
                position: absolute;
                left: -8px;
                top: -1px;
                width: 3px;
                height: 20px;
                background: rgba(24, 144, 255, 1);
            }
        }
    }
    .header-nav {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 32px;
        .header_left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
        .__info {
            display: flex;
            align-items: center;
            margin-right: 32px;
            white-space: nowrap;
            margin-bottom: 15px;
            .__info_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-right: 12px;
            }
        }
        .__left_button {
            flex: 1;
            height: 36px;
            background: rgba(32, 160, 255, 0.1);
            border-radius: 4px;
            border: 1px solid #20A0FF;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            // margin-right: 32px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            .el-icon-hand-iconjia {
                color: rgba(32, 160, 255, 1);
                margin-right: 10px;
                font-size: 14px;
                font-weight: 500;
            }
        }
        .__right_button {
            width: 128px;
            height: 36px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #20A0FF;
            text-align: center;
            line-height: 36px;
            color: rgba(32, 160, 255, 1);
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
        }
    }

    .__wrap {
        width: calc(100% - 64px);
        margin-left: 32px;
        margin-bottom: 12px;
        flex: 1;
        overflow: hidden;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin-top: 9px;
    }
    /* 表单 */
    .scope-price {
        width: 50px;
        height: 50px;
    }
    /* 字体高亮 */
    .cursor-font {
        color: rgb(64, 158, 255);
        cursor: pointer;
    }
    /* 分页 */
    .pagination-wrapper {
        padding-top: 10px;
        padding-bottom: 10px;
        .el-pagination {
            float: right;
            padding: 0;
            background-color: transparent;
        }
    }
}
.__flex_wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .__flex_wrap_title {
        color: rgba(51, 51, 51, 1);
        font-size: 14px;
        font-weight: 500;
    }
}
.__flex_clum {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .__flex_wrap_targe {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 4px;
    }
    .___flex_reson {
        display: inline-block;
        color: rgba(32, 160, 255, 1);
        margin-left: 4px;
        cursor: pointer;
    }
}
/* 排序 */
.sort-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    .sort-spliter {
        width: 1px;
        height: 12px;
        background: rgba(235, 235, 235, 1);
        margin: 0 10px;
        }
        .btn-sort {
        font-size: 14px;
        line-height: 1;
        color: #ccc;
        &:hover {
            color: #20a0ff;
        }
    }
}
.el-button-left {
    margin-left: 40px;
}
.el-button-right {
    margin-right: 10px;
}
.__flex {
    display: flex;
    align-items: center;
    .__flex_status {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
    }
}
</style>
<style lang="less">
    .platformControl{
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border-right: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border-right: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
    }
</style>